<template>
  <div>
    <div class="box">
      <div class="circular circular1"></div>
      <div class="circular circular2"></div>
      <div class="circular circular3"></div>
      <div class="circular circular4"></div>
      <div class="wrap">
        <img src="../../assets/image/login.png" class="img1" />
        <div class="con">
          <img src="../../assets/image/orange.png" />
          <p>优 质 甄 选 · 高 枕 无 忧</p>
          <el-input
            placeholder="请输入账号"
            clearable
            class="inp"
            v-model="form.username"
          ></el-input>
          <el-input
            placeholder="请输入密码"
            clearable
            show-password
            class="inp"
            v-model="form.password"
          ></el-input>
          <el-button type="primary" @click="submit()"
            >登&nbsp;&nbsp;录</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "../../request/api";
import { successAlert, warningAlert } from "../../util/alert";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    ...mapActions({
      reqChangeUser: "reqChangeUser",
    }),
    submit() {
      login(this.form).then((res) => {
        if (res.data.code == 200) {
          // 登录成功的弹窗
          successAlert(res.data.msg);
          // 将用户的信息存储到状态层
          this.reqChangeUser(res.data.list);
          // 跳转到首页
          this.$router.push("/");
        } else {
          // 登录失败的弹窗
          warningAlert(res.data.msg);
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
@import url("../../less/index.less");

.box {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(@color1, @color2);
  position: relative;
}

.wrap {
  position: absolute;
  right: 15%;
  top: 5vh;
}

.img1 {
  height: 90vh;
}

.con {
  width: 50%;
  position: absolute;
  right: 4%;
  top: 0;
}

.con img {
  width: 100%;
  margin-top: 25%;
}

.con p {
  margin-top: 7%;
  text-align: center;
  font-size: 26px;
  color: rgb(149, 149, 149);
  margin-bottom: 22%;
}

.con .inp {
  margin-bottom: 5%;
}

.con button {
  width: 100%;
  font-size: 20px;
  border-radius: 22px;
  margin-top: 3%;
}

.circular {
  border-radius: 50%;
  background: linear-gradient(rgba(255, 85, 51, 1), rgba(255, 85, 51, 0));
}

.circular1 {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 10%;
  top: 50%;
}
.circular2 {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 0;
  top: 30%;
  transform: translateX(-50%);
}
.circular3 {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 30%;
  top: 20%;
}
.circular4 {
  width: 170px;
  height: 170px;
  position: absolute;
  right: 0;
  top: 25%;
  transform: translateX(30%);
}
</style>